<template>
    <ZwUnityKitSelectItems v-model="labelList" :tag-btn-name="tagBtnName" @open="openSelectTag" @change="changeTags" />
    <!-- 选择素材标签 -->
    <ZWSelectTag ref="selectMaterialTagsRef" @submit="getMaterialLabel" />
    <!-- 选择客户标签 -->
    <ZwBatchLabel ref="selectCustTagsRef" @save="getCustLabel" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import ZWSelectTag from '@/components/ZWSelectTag.vue';
import { ZwUnityKitSelectItems } from '@zhongwan/zw-unitykit-select-items';

const selectMaterialTagsRef = ref();
const selectCustTagsRef = ref();
const labelList = ref<any[]>([]);

const props = withDefaults(
    defineProps<{
        type: number; // 标签类型 1 素材标签  2 客户标签
        modelValue: Array<any>; // 选中的标签
    }>(),
    { type: 1, modelValue: () => [] }
);

const tagBtnName = computed(() => {
    let name = '';
    switch (props.type) {
        case 1:
            name = '标签';
            break;
        case 2:
            name = '标签';
            break;
    }
    return name;
});

const emit = defineEmits(['update:modelValue']);

/**
 * @description: 打开选择标签同框
 * @return {*}
 */
const openSelectTag = () => {
    switch (props.type) {
        case 1:
            openMaterialSelectTag();
            break;
        case 2:
            openCustSelectTag();
            break;
    }
};

/**
 * @description: 打开选择素材标签
 * @return {*}
 */
const openMaterialSelectTag = () => {
    selectMaterialTagsRef.value.appDialog.visible = true;
    selectMaterialTagsRef.value.appDialog.title = '选择素材标签';
    selectMaterialTagsRef.value.showCreatTag = true;
    selectMaterialTagsRef.value.selectTags = props.modelValue;
};

/**
 * @description: 打开选择客户标签
 * @return {*}
 */
const openCustSelectTag = () => {
    selectCustTagsRef.value.chooseDataArr = [...props.modelValue];
    selectCustTagsRef.value.dialogVisible = true;
    selectCustTagsRef.value.title = '选择客户标签';
    selectCustTagsRef.value.hasConditiion = false;
};

/**
 * @description: 获取标签
 * @param {*} val
 * @return {*}
 */
const changeTags = (val: any[]) => {
    emit('update:modelValue', val);
};

const getLabel = (val: string | any[]) => {
    labelList.value.splice(0);
    if (val && val.length) {
        labelList.value.push(...val);
        changeTags([...val]);
    } else {
        changeTags([]);
    }
};

const getMaterialLabel = (val: any) => {
    getLabel(val);
};

const getCustLabel = (val: { data: any }) => {
    getLabel(val.data);
};

const init = () => {
    if (props.modelValue.length) {
        labelList.value.splice(0);
        labelList.value.push(...props.modelValue);
    }
};

defineExpose({
    init
});
</script>

<style lang="scss" scoped>
.tags-btn {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;

    .el-button {
        height: 28px;
    }
}

.tags-list {
    .el-tag {
        margin-right: 8px;
    }
}
</style>
